
<!doctype html>
<!--

	test page for the functionality to set some parent as draggable and when you drag that parent it knows to
	update any child elements that have endpoints.

-->
<html>
	<head>
		<title>drag child elements test page</title>
		<style>
			#demo {
				overflow:scroll;
				margin-top:5em;
			}
			._jsPlumb_connector {
				z-index:4;
			}
			
			._jsPlumb_endpoint {
				z-index:6;
			}

			.dragHover { border:1px dotted red; }

			.p {
				position:absolute;
				width:10em;
				height:10em;
				text-align:center;
				border:1px solid black;
				z-index:5;
				background-color:white;
				opacity:0.9;
			}

			.c {
				width:4em;
				height:2em;
				margin:1em;
				background-color:red;
			}
			
		</style>
	</head>
	<body>
		<p>
		This is a test for endpoints that are the children of some element that is draggable.  this feature will be new
		to jsPlumb 1.3.8.
		</p>
		<p>
			<a href="dragChildElementsYUI.html">YUI3</a>
			<a href="dragChildElementsMootools.html">MooTools</a>
		</p>
		<div id="demo">
			<div id="p1" class="p p-existing">
				<div class="c cs">drag</div>
				<div class="c cs">drag</div>
				<div class="c cs">drag</div>

			</div>
			
			<div id="p2" class="p p-existing" style="top:300px;left:400px;">
				<div class="c ct">drop</div>
				<div class="c ct">drop</div>
				<div class="c ct">drop</div>
			</div>			

			<!-- note this div lacks the "p-existing" class, which means it will not be initialised
			draggable along with the other two.  this is to test the case where a div is made draggable and
			contains divs with endpoints registered -->
			<div id="p3" class="p" style="top:170px;left:690px;">
				<div class="c ct">drop</div>
				<div class="c ct">drop</div>
				<div class="c ct">drop</div>
			</div>			

		</div>
	
	 	<script type="text/javascript" src="../../js/lib/jquery-1.6.3-min.js"></script>
		<script type="text/javascript" src="../../js/lib/jquery-ui-1.8.13-min.js"></script>
		<script type="text/javascript" src="../../js/lib/jsBezier-0.3-min.js"></script>
		<!-- main jsplumb engine -->
		<script type="text/javascript" src="../../js/1.3.8/jsPlumb-1.3.8-RC1.js"></script>
		<!-- connectors, endpoint and overlays  -->
		<script type="text/javascript" src="../../js/1.3.8/jsPlumb-defaults-1.3.8-RC1.js"></script>		
		<!-- state machine connectors -->
		<script type="text/javascript" src="../../js/1.3.8/jsPlumb-connectors-statemachine-1.3.8-RC1.js"></script>		
		<!-- SVG renderer -->
		<script type="text/javascript" src="../../js/1.3.8/jsPlumb-renderers-svg-1.3.8-RC1.js"></script>
		<!-- canvas renderer -->
		<script type="text/javascript" src="../../js/1.3.8/jsPlumb-renderers-canvas-1.3.8-RC1.js"></script>
		<!-- vml renderer -->
		<script type="text/javascript" src="../../js/1.3.8/jsPlumb-renderers-vml-1.3.8-RC1.js"></script>
		<!-- jquery jsPlumb adapter -->
		<script type="text/javascript" src="../../js/1.3.8/jquery.jsPlumb-1.3.8-RC1.js"></script>					            			
		
		<script>				
			jsPlumb.ready(function() {
				jsPlumb.importDefaults({
					Container:$("body")
				});	

				// make the parent draggable.  jsplumb needs to remember this, and then when endpoints are added below
				// it needs to register them against that draggable, by looking up the parent hierarchy for elements for
				// which it has a draggable registered.
				jsPlumb.draggable($(".p-existing"));

				// delete on click
				jsPlumb.bind("click", jsPlumb.detach);

				var e = {
					endpoint:["Dot", {radius:7}]
				};
				jsPlumb.addEndpoint($(".cs"), e, { isSource:true, anchor:"RightMiddle", paintStyle:{fillStyle:"green"}});
				jsPlumb.addEndpoint($(".ct"), e, { isTarget:true, anchor:"LeftMiddle", paintStyle:{fillStyle:"blue"}});
				
				// now make p3 draggable. it should discover child endpoints and register them.
				jsPlumb.draggable($("#p3"));
				
			});
		</script>
	</body>
</html>
